<template>
  <div id="shuiZhi">
    <div class="bg-color-my">
      <div class="d-flex pt-2 pl-2">
        <span style="color: #5cd9e8">
          <icon name="chart-pie" width="0.3rem" height="0.3rem"></icon>
        </span>
        <div class="d-flex" style="position: relative; width: 100%">
          <span
            class="fs-xl text mx-2"
            style="line-height: 0.3rem; font-size: 0.2rem;color: white;"
            >水质</span
          >
          <dv-decoration-1
            style="
              width: 1.25rem;
              height: 0.3rem;
              position: relative;
              top: -0.0375rem;
              position: absolute;
              right: 0.2rem;
            "
          />
        </div>
      </div>
      <div class="d-flex jc-center">
        <div id="shuiZhiChart" style="width: 100%; height: 5rem"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indicatorData: [
        {
          text: "有害物:87.50",
          name_: "有害物",
          max: 140,
        },
        {
          text: "挥发酚:0.001",
          name_: "挥发酚",
          max: 0.005,
        },
        {
          text: "氨氮:0.110",
          name_: "氨氮",
          max: 1,
        },
        {
          text: "铜离子:0.005",
          name_: "铜离子",
          max: 1,
        },
        {
          text: "锰离子:0.003",
          name_: "锰离子",
          max: 0.1,
        },
        {
          text: "铬离子:0.002",
          name_: "铬离子",
          max: 0.005,
        },
        {
          text: "浊度:7.956",
          name_: "浊度",
          max: 500,
        },
        {
          text: "PH:7.089",
          name_: "PH",
          max: 9,
        },
        {
          text: "COD:8.038",
          name_: "COD",
          max: 20,
        },
      ],
      currentsData: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      minsData: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      maxsData: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      average: [0, 0, 0, 0, 0, 0, 0, 0, 0],
    };
  },
  components: {},
  mounted() {
    setTimeout(() => {
      this.changeTiming();
      this.timer = setInterval(this.changeTiming, 600000);
    }, 100);
  },
  methods: {
    draw() {
      var chart = this.$echarts.init(document.getElementById("shuiZhiChart"));
      // chart.clear();

      // 指定图表的配置项和数据
      var option = {
        legend: {
          // itemStyle:{color:['#c8e176','#d7e172','#8ae136']},
          textStyle: { color: "#FFF" },
        },
        color: ["#b3e153", "#fc8b88", "#2fe191"],
        textStyle: { fontSize: 10 },
        radar: [
          {
            indicator: this.indicatorData,
            center: ["50%", "60%"],

            radius: 100,
            name: {
              textStyle: {
                color: "#fff",
                backgroundColor: "rgba(0,0,0,0)",
                borderRadius: 3,
                padding: [3, 0],
              },
            },
          },
        ],
        series: [
          {
            name: "数值",
            type: "radar",
            radarIndex: 0,
            data: [
              {
                value: this.currentsData,
                name: "实时",
                label: {
                  //     show: true,
                  //     formatter: function(params) {
                  //         return params.value;
                  //     }
                  fontSize: 10,
                },
                lineStyle: {
                  type: "solid",
                },
                areaStyle: {
                  color: new this.$echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "#c8e176",
                      offset: 1,
                    },
                  ]),
                },
              },
              {
                value: this.average,
                name: "月平均值",
                label: {
                  //     show: true,
                  //     formatter: function(params) {
                  //         return params.value;
                  //     }
                  fontSize: 10,
                },
                lineStyle: {
                  type: "solid",
                },
              },
              // {
              //   value: this.minsData,
              //   name: '月最低值',
              //   label: {
              //     //     show: true,
              //     //     formatter: function(params) {
              //     //         return params.value;
              //     //     }
              //     fontSize:10,
              //   },
              //   lineStyle: {
              //     type: 'solid'
              //   }
              // }
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      chart.setOption(option);
    },

    async changeData() {
      var _this = this;
      let result = await _this.$http.get("api/bi/selectBISZ.do?beforeDays=30");
      if (result && result.status === 200) {
        var data = result.data.currents;
        _this.currentsData = [];
        // _this.minsData=[];
        // _this.maxsData=[];
        _this.average = [];
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < _this.indicatorData.length; j++) {
            if (_this.indicatorData[j].name_ == data[i].name) {
              let o = data[i].value ? Number(data[i].value).toFixed(3) : 0,
                p = data[i].avg ? Number(data[i].avg).toFixed(3) : 0;
              _this.currentsData[j] =
                o > _this.indicatorData[j].max
                  ? _this.indicatorData[j].max
                  : o > 0
                  ? o
                  : 0;
              _this.average[j] =
                p > _this.indicatorData[j].max
                  ? _this.indicatorData[j].max
                  : p > 0
                  ? p
                  : 0;
              _this.indicatorData[j].text =
                _this.indicatorData[j].name_ + ":" + o;
              break;
            }
          }
        }
        _this.draw();
      }
    },
    changeTiming() {
      this.changeData();
    },
  },
};
</script>

<style lang="scss">
#shuiZhi {
  padding: 0.2rem;
  height: 5.775rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-my {
    height: 5.3625rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>
